<tr @click="volume = '<%= @plan.volume %>'" :class="{'border-2 border-green-300 bg-opacity-20 bg-green-300': volume === '<%= @plan.volume %>', 'border-b border-gray-200 cursor-pointer': volume !== '<%= @plan.volume %>'}">
  <td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': volume === '<%= @plan.volume %>'}"><%= @plan.volume %></td>
  <td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': volume === '<%= @plan.volume %>'}">
    <span x-show="billingCycle === 'monthly'"><span x-text="priceFor(<%= @plan.monthly_product_id %>)"></span> / mo</span>
    <span x-cloak x-show="billingCycle === 'yearly'"><span x-text="priceFor(<%= @plan.yearly_product_id %>)"></span> / yr</span>
  </td>
</tr>
